function Tab(el,option = {}){    // el是element的缩写，option是选项，{}表示默认值，后期可以写一些插件配置
    // 构造函数中的this === 实例化对象 === 原型方法中的this
    this.el = document.querySelector(el)       // 保存最大的盒模型，方便基于这个最大的盒模型找其子内容
    // 思考1：为啥要把最大的盒模型标签对象保存起来
    // 回答1：因为写特效的时候经常要从网页中找标签获取对象加事件，以前是给一个加，直接从网页中获取，现在是给指定的盒模型加，就不能从整个网页中获取，而是要从指定的盒模型中获取

    this.init()        // this指的是tab1和tab2，没有init，需要在公共空间上定义一个init函数，然后再调用，如果不懂也可以不写init，直接在公共空间里面写titleOver函数，在构造函数中调用titleOver
    // 调用插件初始化
}
Tab.prototype.init = function(){
    // 在原型方法里面的this指的也是tab1和tab2
    // this.功能
    // ......

    // 比如，tab选项卡---标题移入功能
    this.titleOver()     // 可以先在公共空间里面写好titleOver方法，然后直接在init里面调用即可，这样分开写方法好维护
    // 思考2：要加移入事件，你直接在Tab构造函数中写不就好了
    // 回答2：构造函数属于对象占用内存，原型中减少内存
    // 在这里原型方法中this指的也是实例化对象tab1和tab2

}
Tab.prototype.titleOver = function(){
    // 标题移入功能
    // 步骤：
    // 1、获取自身标题（即ul底下的li标签）【需要在相对应的盒模型（即this.el）里面获取，直接获取ul li标签就是6个li】
    let ulLiObjs = this.el.querySelectorAll('ul li')

    // 2、遍历
    ulLiObjs.forEach((item,i) => {
        // 3、绑定鼠标移入事件 
        item.onmouseover = () => {
            // 3.1 事件处理函数中---清除带现有的ul下有class属性的li
            this.el.querySelector('ul li.active').className = ''      // 此时如果事件函数不写成箭头的话，下面的this指的就是item事件源，是错误的，我们需要改变this指向，指向为tab1和tab2
            // 3.2 事件处理函数中---给当前移入的li加class属性
            item.className = 'active'
            // 3.3 事件处理函数中---同步内容
            this.changeContent(i)
        }
    })
}

// 将同步内容放到公共空间里面减少内存占用，然后再在title里面调用changeContent方法，需要传递实参i，因为给当前移入的li加class时使用的索引来找的li标签对象
Tab.prototype.changeContent = function(i){
    // 3.3.1 清除带现有的ol下有class属性的li
    this.el.querySelector('ol li.active').className = ''
    // 3.3.2 给当前移入的li加class属性
    this.el.querySelectorAll('ol li')[i].className = 'active' 
}

export default Tab
// 默认导出